import { BasicColumn, FormSchema } from '@/components/Table';
import { h, ref } from 'vue';
import {Image, Tag} from 'ant-design-vue';
import { ywUserSelectList } from '@/api/heng/ywManage';
import { ApiSelect } from '@/components/Form';
import util from '@/utils/util';

import { useMessage } from '@/hooks/web/useMessage';
import Ainput from '@/views/bookManage/components/account/Ainput.vue';
import { VxeFormItemProps, VxeGridPropTypes } from '@/components/VxeTable';
import { changeEnd } from 'codemirror';
import {categoryList, teamSelectList} from '@/api/heng/ex';
import { style } from '@logicflow/extension/es/bpmn-elements/presets/icons';
import {uploadImgApi} from "@/api/sys/upload";

type CheckedType = boolean | string | number;
// BasicColumn[]

// VxeColumnPropTypes.CellRender

/**
 */
export const vxeTableColumns: VxeGridPropTypes.Columns = [
  {
    type:'checkbox',
    title: '',
    field: 'seq',
    width: 40,
  },
  {
    title: '题目内容',
    field: 'title',
    showOverflow: 'title',
    // filters: [{ data: '' }],
    // filterRender: {
    //   name: 'VxeInput',
    // },
  },
  {
    title: '图片',
    field: 'img',
    showOverflow: 'title',
    align: 'center',
    width: 80,
    slots: {
      default:"img_slot"
    }
    // slots: {
    //   default: ({ row }) => {
    //     const img = row.img;
    //     return h(Image, {
    //       width: 50,
    //       height: 50,
    //       src: img,
    //     });
    //   },
    // },
  },
  {
    title: '类型',
    field: 'type',
    showOverflow: 'title',
    align: 'center',
    width: 140,
  },
  {
    title: '分类',
    field: 'categoryName',
    showOverflow: 'title',
    align: 'center',
    width: 140,
  },
  {
    title: '上级分类',
    field: 'pcategoryName',
    showOverflow: 'title',
    align: 'center',
    width: 140,
  },
  {
    title: '部门',
    field: 'teamName',
    showOverflow: 'title',
    align: 'center',
    width: 140,
  },
  {
    title: '排序',
    field: 'sort',
    align: 'center',
    width: 70,
  },
  {
    title: '解析',
    field: 'explain',
    align: 'center',
    width: 100,
  },
  {
    title: '创建时间',
    field: 'createTime',
    width: 180,
    align: 'center',
  },
  {
    width: 150,
    title: '操作',
    align: 'center',
    field: '',
    slots: { default: 'action' },
    fixed: 'right',
  },
];

export const vxeTableFormSchema: VxeFormItemProps[] = [
  {
    span: 5,
    field: 'keyword',
    title: '查询',
    itemRender: {
      props: {
        placeholder: '查询',
      },
      name: 'AInput',
    },
  },
  {
    span: 5,
    field: 'type',
    title: '题目类型',
    itemRender: {
      props: {
        placeholder: '请选择',
        style:{width:'100%'},
        options: [
          { label: '单选题', value: '单选题' },
          { label: '多选题', value: '多选题' },
          { label: '性格与沟通', value: '性格与沟通' },
        ],
      },
      name: 'ASelect',
    },
  },
  {
    span: 5,
    field: 'categoryName',
    title: '分类',
    itemRender: {
      props: {
        placeholder: '查询',
      },
      name: 'AInput',
    },
  },
  {
    span: 5,
    itemRender: {
      name: 'VxeButtonGroup',
      options: [
        { type: 'reset', content: '重置' },
        { type: 'submit', content: '查询', status: 'primary' },
      ],
    },
  },
];

export const formSchema: FormSchema[] = [
  {
    label: '题目内容',
    field: 'title',
    component: 'InputTextArea',
    required: true,
    componentProps: {
      placeholder: '请输入题目内容',
      autoSize: { minRows: 3, maxRows: 6 },
      showCount: true,
    },
  },
  {
    field: 'imgArr',
    label: '题目图片',
    component: 'Upload',
    componentProps: {
      api:uploadImgApi,
      multiple:true,
      accept:['.png','.jpeg','.jpg'],
      resultField:"data.data",
      maxSize:"10",
      maxNumber:"30",
      previewDelete:function (res){
        console.log(res)
      },
      delete:function (record){
        console.log("--delete")
        console.log(record)
      },
      change:function (list){
        console.log("--change");
        console.log(list)

      }
    },
  },
  {
    label: '解析',
    field: 'explain',
    component: 'InputTextArea',
    componentProps: {
      placeholder: '请输入简介',
      autoSize: { minRows: 3, maxRows: 6 },
      showCount: true,
    },
  },
  {
    field: 'categoryId',
    label: '分类名称',
    component: 'ApiTreeSelect',
    componentProps: {
      resultField: 'data',
      labelField: 'categoryName',
      valueField: 'categoryId',
      childrenField: 'children',
      params: { status: 1 },
      api: categoryList,
    },
  },
  {
    field: 'teamId',
    label: '团队',
    required: false,
    component: 'ApiSelect',
    componentProps: {
      resultField: 'data',
      labelField: 'name',
      valueField: 'teamId',
      params: { status: 1 },
      api: teamSelectList,
    },
  },
  {
    label: '类型',
    field: 'type',
    component: 'Select',
    required: true,
    componentProps: {
      options: [
        {
          label: '单选题',
          value: '单选题',
        },
        {
          label: '多选题',
          value: '多选题',
        }
      ]
    }
  },
  {
    field: 'options',
    label: '选项',
    slot: 'options',
    colProps: { lg: 24, md: 24 },
  },
  {
    field: 'info',
    label: '信息',
    slot: 'infos',
    // ifShow: ({ values }) => values.showInfo,
    colProps: { lg: 24, md: 24 },
  },
];

/**
 * 选项
 */
export const optionColumns: VxeGridPropTypes.Columns = [
  {
    title: '选项',
    field: 'letter',
    showOverflow: 'title',
    align: 'center',
    cellRender:{
      name: 'VxeInput'
    },
    width: 140,
  },
  {
    title: '选项内容',
    field: 'title',
    cellRender:{
      name: 'VxeInput'
    },
    showOverflow: 'title',
  },

  {
    title: '是否正确答案',
    field: 'isTrue',
    cellRender:{
      name: 'VxeRadioGroup',
      options: [
        {
          label: '正确',
          value: 1,
        },
        {
          label: '错误',
          value: 0,
        },
      ],
    },
    
    width: 200,
  },
  {
    title: '创建时间',
    field: 'createTime',
    width: 180,
    align: 'center',
  },
  {
    width: 100,
    title: '操作',
    align: 'center',
    field: '',
    slots: { default: 'action' },
    fixed: 'right',
  },
];


export const set_category_formSchema: FormSchema[] = [
  {
    field: 'categoryId',
    label: '分类名称',
    component: 'ApiTreeSelect',
    componentProps: {
      resultField: 'data',
      labelField: 'categoryName',
      valueField: 'categoryId',
      childrenField: 'children',
      params: { status: 1 },
      api: categoryList,
    },
    required:true
  },
];
